<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 120 120"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#1A446C" d="M92.94 15.625H29.739a11.06 11.06 0 0 0-11.06 11.06v44.24a11.06 11.06 0 0 0 11.06 11.061h63.2A11.06 11.06 0 0 0 104 70.926v-44.24a11.057 11.057 0 0 0-6.828-10.22 11.06 11.06 0 0 0-4.232-.841Zm1.58 55.3a1.58 1.58 0 0 1-1.58 1.58H29.739a1.58 1.58 0 0 1-1.58-1.58v-44.24a1.58 1.58 0 0 1 1.58-1.58h63.2a1.58 1.58 0 0 1 1.58 1.58v44.24Zm-15.8 20.541a4.74 4.74 0 0 1-4.74 4.74H48.7a4.74 4.74 0 0 1 0-9.48h25.28a4.74 4.74 0 0 1 4.74 4.74Z"/><path fill="#06F" d="M27.632 48.076c1.375 0 2.694.478 3.667 1.33.972.85 1.519 2.004 1.519 3.208 0 1.203-.547 2.357-1.52 3.208-.972.851-2.29 1.33-3.666 1.33-1.375 0-2.694-.479-3.667-1.33-.972-.85-1.519-2.005-1.519-3.208 0-1.204.547-2.358 1.52-3.209.972-.85 2.29-1.329 3.666-1.329Z"/><ellipse fill="#fff" ry="19.446" rx="26.577" cy="50.669" cx="29.577"/><path fill="#1A446C" d="M15.183 58.415c3.141 1.776 7.66 2.948 12.788 2.948 5.132 0 9.646-1.178 12.792-2.948 3.227-1.817 4.524-3.933 4.524-5.693 0-1.766-1.297-3.882-4.524-5.699-3.141-1.776-7.66-2.943-12.792-2.943-5.128 0-9.642 1.167-12.788 2.943-3.227 1.817-4.524 3.933-4.524 5.699 0 1.76 1.297 3.876 4.524 5.693Zm-2.482 4.424c-3.967-2.232-7.108-5.708-7.108-10.117 0-4.415 3.146-7.89 7.103-10.118C16.733 40.326 22.139 39 27.97 39c5.836 0 11.241 1.325 15.28 3.603 3.951 2.227 7.102 5.703 7.102 10.118 0 4.409-3.146 7.885-7.103 10.117-4.038 2.273-9.443 3.603-15.28 3.603-5.826 0-11.231-1.33-15.27-3.603Z" clip-rule="evenodd" fill-rule="evenodd"/><path fill="#06F" d="M27.63 31.223c.661 0 1.296.276 1.763.768.468.492.73 1.16.73 1.856v7.715c0 .696-.262 1.363-.73 1.855a2.433 2.433 0 0 1-1.763.769 2.433 2.433 0 0 1-1.764-.769 2.695 2.695 0 0 1-.73-1.855v-7.715c0-.696.262-1.364.73-1.856a2.433 2.433 0 0 1 1.764-.768Zm10.26 1.338a2.493 2.493 0 0 1 1.586 1.117c.366.579.5 1.287.37 1.969l-1.217 6.424a2.635 2.635 0 0 1-1.062 1.67 2.395 2.395 0 0 1-1.874.39 2.494 2.494 0 0 1-1.587-1.118 2.737 2.737 0 0 1-.37-1.97l1.222-6.425a2.634 2.634 0 0 1 1.062-1.667 2.394 2.394 0 0 1 1.87-.39Zm-20.522 0a2.493 2.493 0 0 0-1.584 1.117 2.737 2.737 0 0 0-.371 1.969l1.222 6.424c.054.348.175.68.354.978.179.297.413.554.688.754a2.379 2.379 0 0 0 1.908.415 2.43 2.43 0 0 0 .917-.405c.276-.199.512-.454.693-.75.18-.296.303-.628.36-.975a2.757 2.757 0 0 0-.031-1.046l-1.218-6.424a2.634 2.634 0 0 0-1.061-1.667 2.406 2.406 0 0 0-1.877-.39Zm-10.56 4.172a2.536 2.536 0 0 0-.723.689 2.687 2.687 0 0 0-.418.927 2.757 2.757 0 0 0 .283 1.99l3.666 6.424a2.6 2.6 0 0 0 .65.777c.264.211.565.365.886.453a2.38 2.38 0 0 0 1.91-.292c.284-.18.53-.416.727-.698.196-.28.336-.6.414-.94a2.759 2.759 0 0 0-.312-2.003l-3.661-6.424a2.509 2.509 0 0 0-1.535-1.194 2.386 2.386 0 0 0-1.887.291Zm41.648 0c.282.178.528.411.724.689a2.7 2.7 0 0 1 .417.927 2.759 2.759 0 0 1-.283 1.99l-3.666 6.424a2.588 2.588 0 0 1-.65.777 2.446 2.446 0 0 1-.886.453 2.38 2.38 0 0 1-.983.056 2.417 2.417 0 0 1-.927-.348 2.545 2.545 0 0 1-.727-.698 2.689 2.689 0 0 1-.413-.94 2.759 2.759 0 0 1-.036-1.034 2.71 2.71 0 0 1 .347-.969l3.661-6.424a2.509 2.509 0 0 1 1.535-1.194 2.386 2.386 0 0 1 1.887.291ZM25.224 52.614a3.056 3.056 0 1 0 6.113 0 3.056 3.056 0 0 0-6.113 0Zm3.056 7.13a7.13 7.13 0 1 1 0-14.26 7.13 7.13 0 0 1 0 14.26Z" clip-rule="evenodd" fill-rule="evenodd"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Solutionskey8 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
